<template>
	<div class="modal_fixed" v-show="visibility">
		<div class="modal" :style="{ width: width }">
			<div class="modal_header">
				<div class="modal_header_descrip">{{ title }}</div>
				<i class="iconfont icon-Close-small" @click="closeModal" ></i>
			</div>
			<div class="modal_body"><slot name="body"></slot></div>
			<div class="modal_foot">
				<div class="buttons">
					<div class="cancelBtn" @click="closeModal">取消</div>
					<slot name="footter"></slot>
				</div>
			</div>
		</div>
		<div class="modal_mask"></div>
	</div>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		width: {
			type: String,
			default: '640px'
		},
		title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			visibility: false
		};
	},
	watch: {
		visible(newVal) {
			this.visibility = newVal;
		}
	},
	mounted() {},
	methods: {
		closeModal(){
			this.visibility = false;
			this.$emit('closeMoadal', false)
		}
	}
};
</script>

<style>
.modal_fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.modal {
	padding: 24px 24px 16px 24px;
	background: #ffffff;
	border-radius: 4px;
	margin: auto;
	position: absolute;
	z-index: 101;
	left: 0;
	right: 0;
	top: -9999px;
	bottom: -9999px;
	max-height: 80%;
	height: fit-content;
}
.modal_header {
	display: flex;
	padding-bottom: 24px;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.modal_header .modal_header_descrip {
	font-size: 16px;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 16px;
}
.modal_header .iconfont {
	font-size: 24px;
	color: #999;
	margin-top: -12px;
	line-height: 24px;
	cursor: pointer;
}
.modal_body{
	min-height: 50px;
	padding: 24px 0;
}
.buttons{
	display: flex;
	justify-content: flex-end;
	padding-top: 16px;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.buttons .btns{
	margin-left: 8px;
	font-size: 14px;
	padding: 9px 16px;
	line-height: 14px;
}
.buttons .cancelBtn{
	background: #FFFFFF;
	border-radius: 4px;
	padding: 9px 16px;
	border: 1px solid #E0E0E0;
	font-size: 14px;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 14px;
	cursor: pointer;
}
.modal_mask {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	border-radius: 0px 0px 0px 0px;
	opacity: 0.5;
	z-index: 100;
}
</style>
